<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }
    body{
      background-color:#fff;  /*背景色不一样就会被看穿啦*/
    }
    /*在这里建个容器先，10个像素边框*/
    .circle {
      width: 180px;
      border: 10px solid skyblue;
      height: 180px;
      border-radius: 100px;
      margin: 20vh auto;/*20vh 很有意思的单位，感兴趣就百度吧*/
      position: relative;
      animation: roate 1.5s infinite linear;/*这里是给动画调用的时的参数*/
    }

    /*旋转360度的设定，动画开始时0%，为0度，到动画结束时100%，为360度*/
    @keyframes roate {
      0% {
        transform: rotateZ(0)
      }
      100% {
        transform: rotateZ(360deg)
      }
    }


    /*这个是渐变半透明盖在circle上的，z-index=2*/
    .circle::after {
      content: "";
      display: block;
      width: 200px;
      height: 200px;
      position: absolute;
      top: -10px;
      left: -10px;
      z-index: 2;
      background-image: linear-gradient(to left, #fefefe, rgba(255, 255, 255, .1));
    }


    /*这个盖最上层，遮住一半的圆，半圆效果就有了*/
    /*.circle::before {*/
      /*content: "";*/
      /*display: block;*/
      /*width: 200px;*/
      /*height: 100px;*/
      /*position: absolute;*/
      /*z-index: 3;*/
      /*background-color: #fefefe;*/
      /*top: -10px;*/
      /*left: -10px;*/
    /*}*/
  </style>
</head>
<body>
<div class="circle"></div>

</body>
</html>